<template>
  <div class="container">
    <el-container class="count">
      <el-main>
        <!-- 组件 -->
        <form-item @changetext="question($event)" />
        <!-- tab切换 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <!-- 数目 -->
          </el-tab-pane>
          <el-tab-pane label="待审核" name="two"> </el-tab-pane>
          <el-tab-pane label="已审核" name="three"> </el-tab-pane>
          <el-tab-pane label="已拒绝" name="four"> </el-tab-pane>
        </el-tabs>
        <el-row class="data">
          <span style="margin-left: 20px"
            ><i class="el-icon-info"></i> 数据一共{{
              this.tableData.length
            }}条</span
          ></el-row
        >
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 10px">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="formatterss"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="question" label="题干" width="180">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="160">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            :formatter="difficultys"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column
            prop="chkState"
            label="审核状态"
            :formatter="chkTypes"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column label="发布状态" width="120">
            <template slot-scope="{ row }">
              <span>
                {{
                  row.publishState === 0
                    ? "待发布"
                    : row.publishState === 1
                    ? "已发布"
                    : "已下架"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" size="small">预览</el-button>
              <el-button
                type="text"
                size="small"
                @click="examine(row.id)"
                :disabled="row.chkState === 0 ? false : true"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.publishState === 0 ? false : true"
                @click="toEdit(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="xiajia(row)">{{
                row.publishState === 1 ? "下架" : "上架"
              }}</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteitem(row)"
                :disabled="row.publishState === 0 ? false : true"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格部分 -->
        <!-- 放置分页 -->
            <el-row type="flex" justify="end">
                <el-col :span="11" :push="2">
            <el-pagination
              @current-change="handle"
              background
              layout="prev ,pager, next,  sizes,jumper "
              :page-sizes="[10]"
              :page-size="2000"
              :total="20"
            >
            </el-pagination>
          </el-col>
              </el-row>
        <title-review
          :dialogFormVisible.sync="dialogFormVisible"
          ref="refid"
          @Refresh="Refreshss"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import formItem from "./components/formitem";
import { choice, choicePublish, choiceAdd } from "@/api/hmmm/questions";
import { questionType, difficulty, chkType } from "@/api/hmmm/constants.js";
import TitleReview from "./components/title-review";
export default {
  data() {
    return {
      activeName: "first",
      //  全部列表
      tableData: [],
      dialogFormVisible: false,
      pages: {
        page: 0,
        pagesize: 6,
      },
    };
  },
  components: {
    formItem,
    TitleReview,
  },
  created() {
    // 精选题库列表
    this.choice();
  },
  methods: {
    async choice() {
      const { data } = await choice();
      this.tableData = data.items;
    },
    async handleClick(tab, event) {
      if (tab.name === "two") {
        const { data } = await choice({ chkState: 0 });
        this.tableData = data.items;
        // console.log(this.tableData);
      } else if (tab.name === "first") {
        this.choice();
      } else if (tab.name === "three") {
        const { data } = await choice({ chkState: 1 });
        this.tableData = data.items;
      } else if (tab.name === "four") {
        const { data } = await choice({ chkState: 2 });
        this.tableData = data.items;
      }
    },
    formatterss(row, column, cellValue, index) {
      let label = "";
      questionType.forEach((item) => {
        if (cellValue == item.value) {
          label = item.label;
        }
      });
      return label;
    },
    difficultys(row, column, cellValue, index) {
      let label = "";
      difficulty.forEach((item) => {
        if (cellValue == item.value) {
          label = item.label;
        }
      });
      return label;
    },
    chkTypes(row, column, cellValue, index) {
      let label = "";
      chkType.forEach((item) => {
        if (cellValue == item.value) {
          label = item.label;
        }
      });
      return label;
    },
    async question(event) {
      const { data } = await choice({ ...event, ...this.pages });
      this.tableData = data.items;
      // console.log(data.items);
    },
    //  点击审核
    examine(id) {
      this.dialogFormVisible = true;
      this.$refs.refid.userid(id);
    },
    Refreshss() {
      this.choice();
      this.activeName = "first";
    },
    //  下架的按钮
    xiajia(row) {
      this.$confirm(
        `您确定${row.publishState === 1 ? "下架" : "上架"}这道题目吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          if (row.publishState == 1) {
            // 调用下架的接口
            await choicePublish({ id: row.id, publishState: 0 });
          } else if (row.publishState == 0) {
            // 调用上架的接口
            await choicePublish({ id: row.id, publishState: 1 });
          }
          this.choice();
          this.activeName = "first";
          this.$message({
            type: "success",
            message: `${row.publishState === 1 ? "下架" : "上架"}成功!`,
          });
        })
        .catch(() => {});
    },
    //  删除
    async deleteitem(row) {
      try {
        await this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        // alert(111);
        await choiceAdd({ id: row.id, choiceState: 0 });
        await this.choice();
        await this.$message({
          type: "success",
          message: "删除成功!",
        });
      } catch (err) {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
    },
    handle(newpage) {
      this.page = newpage;
      this.choice();
    },
    toEdit(row) {
      this.$router.push({
        path: "new",
        query: {
          id: row.id,
        },
      });
    },
  },
};
</script>

<style scoped>
.count {
  margin-top: 15px;
  padding: 0 20px;
  width: 100%;
}
.el-main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-bottom: 10px;
}
.data {
  width: 100%;
  height: 40px;
  background-color: #f4f4f5;
  color: #989ba1;
  line-height: 40px;
  border-radius: 10px;
}
</style>
